<template>
  <div id="ymDatePicker">
    <van-popup v-model="value" position="bottom" :close-on-click-overlay="false">
      <van-picker show-toolbar title="选择时间" @cancel="onPickerCancel" @confirm="onPickerConfirm" :columns="columns" @change="onChange" />
    </van-popup>
  </div>
</template>
<script>
import { formatNumber } from '../libs/utils'
const weekDay = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
export default {
  props: {
    value: {
      type: Boolean,
      value: false
    },
    disabledWeekDay: {
      type: Array,
      value: []
    },
    unixTime: {
      type: [String, Number],
      value: 0
    },
    hasChange: {
      type: [String, Number, Boolean],
      value: 0
    }
  },
  watch: {
    hasChange: function() {
      this.initYMD()
    }
  },
  created() {
    this.initYMD()
  },
  data() {
    return {
      year: 0,
      month: 0,
      day: 0,
      maxDay: 31,
      columns: []
    }
  },
  methods: {
    initYMD() {
      const date = new Date(parseInt(this.unixTime) * 1000)
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
      this.day = date.getDate()
      this.setColumns()
    },
    setColumns() {
      let columns = [{
        values: [],
        className: "column1"
      }, {
        values: [],
        className: "column2",
      }, {
        values: [],
        className: "column3",
      }]
      columns[0].values = this.setColumns0()
      columns[1].values = this.setColumns1(this.year)
      columns[2].values = this.setColumns2(this.year, this.month)

      this.columns = columns
    },

    setColumns0() {
      let columns = []
      for (let i = this.year; i <= this.year + 2; i++) {
        columns.push({
          text: i,
          value: i,
          disabled: false
        })
      }
      return columns
    },
    setColumns1(year) {
      let columns = []
      let initMonth = 1
      if (year == this.year) {
        initMonth = this.month
      }
      for (let i = initMonth; i <= 12; i++) {
        columns.push({
          text: i,
          value: i,
          disabled: false
        })
      }
      return columns
    },
    setColumns2(year, month) {
      let columns = []
      let maxDay = new Date(year, month, 0).getDate()
      let initDay = 1
      if (year == this.year && month == this.month) {
        initDay = this.day
      }
      for (let i = initDay; i <= maxDay; i++) {
        let weekIndex = new Date(year, month - 1, i).getDay()
        columns.push({
          text: i + ' ' + weekDay[weekIndex],
          value: i,
          disabled: this.disabledWeekDay.indexOf(weekIndex) > -1
        })
        weekIndex = null
      }
      return columns
    },

    onPickerCancel() {
      this.$emit('input', false)
      this.$emit('onCancel')
    },
    onPickerConfirm(value, index) {
      this.$emit('input', false)
      this.$emit('onConfirm', Array.from(value, x => x.value).map(formatNumber).join('-'))
    },
    onChange(picker, values, index) {
      if(index === 0) {
        let columns1 = this.setColumns1(values[0].text)
        let month = 1
        if (values[0].text == this.year) {
          month = this.month
        }
        let columns2 = this.setColumns2(values[0].text, month)
        picker.setColumnValues(1, columns1)
        picker.setColumnValues(2, columns2)
      } else if(index === 1) {
        let columns2 = this.setColumns2(values[0].text, values[1].text)
        picker.setColumnValues(2, columns2)
      }
    }
  }
}
</script>
